<template>
<div>
    <div class="item" @click="showEditInput"
    v-show="!isEdit">
           {{text}}
    </div>
    <input ref="inputRef" class="item edit"
    v-model="editMsg" v-show="isEdit" @blur="textChange"/>
</div>
</template>

<script>
export default{
    props:{
        text:{
            type:String,
            default:""
        },
    
    index:{
        type:Number
    }
},
    data(){
        return{
editMsg:this.text,
isEdit:false
        };
    },
    methods:{
    showEditInput(){
        this.isEdit=true;
        this.$nextTick(()=>{
this.$refs.inputRef.focus();
        })
    },
    textChange(){
        this.isEdit=false;
        this.$emit('change',this.editMsg,
        this.index);
    }

    },
};
</script>
<style scoped>
.item{
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: #40b883;
    color: white;
    border-bottom:1px solid#ccc ;
    margin:0 auto;
}
</style>